/deep/ .el-drawer__container {
    background: rgba(17, 19, 24, 0.45);
    backdrop-filter: blur(22px);
    .el-drawer {
        background-color: transparent;

        .voiceView {
            position: absolute;
            bottom: 45%;
            width: 100%;
            transform: translateY(-50%);

            //语音动画
            .loader {
                margin: auto;
                width: 250px;
                height: 70px;
                display: flex;
                justify-content: space-between;
                opacity: 0;
                span {
                    display: block;
                    background: #3894f7;
                    width: 3px;
                    height: 10%;
                    border-radius: 3px;
                    margin-top: 35px;

                    &:nth-child(1) {
                        animation: load 1.5s 1s infinite linear;
                    }

                    &:nth-child(2) {
                        animation: load 1.5s 0.9s infinite linear;
                    }

                    &:nth-child(3) {
                        animation: load 1.5s 0.8s infinite linear;
                    }

                    &:nth-child(4) {
                        animation: load 1.5s 0.7s infinite linear;
                    }

                    &:nth-child(5) {
                        animation: load 1.5s 0.6s infinite linear;
                    }

                    &:nth-child(6) {
                        animation: load 1.5s 0.5s infinite linear;
                    }

                    &:nth-child(7) {
                        animation: load 1.5s 0.4s infinite linear;
                    }

                    &:nth-child(8) {
                        animation: load 1.5s 0.3s infinite linear;
                    }

                    &:nth-child(9) {
                        animation: load 1.5s 0.2s infinite linear;
                    }

                    &:nth-child(10) {
                        animation: load 1.5s 0.1s infinite linear;
                    }

                    &:nth-child(11) {
                        animation: load 1.5s 0s infinite linear;
                    }

                    &:nth-child(12) {
                        animation: load 1.5s 0.1s infinite linear;
                    }

                    &:nth-child(13) {
                        animation: load 1.5s 0.2s infinite linear;
                    }

                    &:nth-child(14) {
                        animation: load 1.5s 0.3s infinite linear;
                    }

                    &:nth-child(15) {
                        animation: load 1.5s 0.4s infinite linear;
                    }

                    &:nth-child(16) {
                        animation: load 1.5s 0.5s infinite linear;
                    }

                    &:nth-child(17) {
                        animation: load 1.5s 0.6s infinite linear;
                    }

                    &:nth-child(18) {
                        animation: load 1.5s 0.7s infinite linear;
                    }

                    &:nth-child(19) {
                        animation: load 1.5s 0.8s infinite linear;
                    }

                    &:nth-child(20) {
                        animation: load 1.5s 0.9s infinite linear;
                    }

                    &:nth-child(21) {
                        animation: load 1.5s 1s infinite linear;
                    }
                }
            }

            .displayNone {
                display: none;
            }
            .active {
                animation: holdingOpacity 0.2s linear;
                animation-fill-mode: forwards;
                //  opacity: 1;
            }
        }

        .text-box {
            position: absolute;
            bottom: 116px;
            width: 100%;
            text-align: center;
            color: $textColor_1;
            font-size: $fontH16;
            opacity: 0.3;
            h2 {
                font-weight: 500;
                color: #9ea3b1;
            }
            span {
                color: #9ea3b1;
            }
            &.active {
                animation: holdingOpacity 0.2s linear;
                animation-fill-mode: forwards;
            }
        }

        //新版语音
        .video-content-btn {
            width: 100%;
            height: 0;
            position: absolute;
            left: 0;
            top: calc(100% - 84px);
            display: flex;
            justify-content: center;
            transition: all 1s;
            // div {
            //     width: 70px;
            //     height: 70px;
            //     color: $textColor_1;
            //     background: #4e4f50;
            //     border-radius: 50%;
            //     display: flex;
            //     align-items: center;
            //     justify-content: center;
            //     user-select: none;
            //     i.iconyuyin {
            //         font-size: $fontH24;
            //     }
            // }
            .holding-bg {
                position: absolute;
                top: 60px;
                width: 0;
                height: 0;
                border-radius: 0;
            }

            .cover {
                user-select: none;
                -webkit-touch-callout:none;
                width: 100%;
                height: 150px;
                position: absolute;
                z-index: 100;
            }

            .active {
                animation: holdingBg 0.2s linear;
                animation-fill-mode: forwards;
            }
            img {
                user-select: none;
                -webkit-touch-callout:none;
                position: absolute;
                top: 15px;
                width: auto;
                height: 40px;
            }
        }
    }
}
.appBottom {
    user-select: none;
    //   height: 60px;
    width: 100%;
    // height: calc(60px+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
    height: calc(54px+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/

    // height: calc(60px + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
    height: calc(54px + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
    // background-image: url("../images/appBottomBg-black.png");
    background-color: #232938;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    // position: absolute;
    bottom: 0px;
    z-index: 8;

    padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/

    padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/

    margin-bottom: constant(safe-area-inset-top);
    margin-bottom: env(safe-area-inset-top);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.16);

    .iconItem {
        width: 75px;
        height: 20px;
        // margin-top: 8px;
        color: white;

        i {
            font-size: 24px;
        }
    }

    .iconItem:nth-child(3) {
        width: 83px;
        height: 69px;
        transform: translateY(-8px);
        // margin-top: 4px;
        img {
            user-select: none;
            width: 100%;
            height: auto;
        }
    }

    .bottom-item {
        display: flex;
        align-items: center;
        flex-direction: column;
        color: #ced3e0;
        .bottom-item-icon {
            font-size: 24px;
            margin-bottom: 4px;
        }
        .bottom-item-txt {
            font-size: 10px;
        }
    }
    .bottom-item-active {
        color: #5697ff;
    }

    // .voice-container {
    //     width: 100%;
    //     height: 100%;
    //     position: absolute;
    //     left: 0;
    //     bottom: 0;
    //     z-index: 499;
    //     background: rgba(0, 0, 0, 0.5);
    //     & > div {
    //         width: 90%;
    //         bottom: 80px;
    //         margin: auto;
    //         position: absolute;
    //         margin-left: 5%;
    //         background: white;
    //         padding: 1rem;
    //         border-radius: 6px;
    //         & > p {
    //             text-align: center;
    //             margin-bottom: 1rem;
    //         }
    //         & > div {
    //             width: 200px;
    //             height: 200px;
    //             margin: auto;
    //             border: 1px solid red;
    //         }
    //     }
    // }

    @keyframes load {
        0% {
            background: #3894f7;
            margin-top: 35px;
            height: 15%;
        }
        50% {
            background: #3894f7;
            height: 100%;
            margin-top: 0%;
        }
        100% {
            background: #3894f7;
            height: 15%;
            margin-top: 35px;
        }
    }

    @keyframes holdingOpacity {
        50% {
            opacity: 0.5;
        }
        100% {
            opacity: 1;
        }
    }

    @keyframes holdingBg {
        50% {
            top: 30px;
            width: 60%;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(180deg, #393e4d 0%, #232938 100%);
        }
        100% {
            top: 0;
            width: 120%;
            height: 150px;
            border-radius: 100% 100% 0 0;
            background: linear-gradient(180deg, #393e4d 0%, #232938 100%);
        }
    }
}
